<template>
    <el-row>
        <!-- 头部 -->
        <el-col :span="24">
            <el-card shadow="hover">
                <el-breadcrumb :separator-icon="ArrowRightBold">
                    <el-breadcrumb-item :to="{ path: '/admin_index' }">首页</el-breadcrumb-item>
                    <el-breadcrumb-item>权限管理</el-breadcrumb-item>
                    <el-breadcrumb-item>角色管理</el-breadcrumb-item>
                </el-breadcrumb>
            </el-card>
        </el-col>
        <div style="padding: 5px;"></div>
        <!-- 内容区域 -->
        <el-col :span="24">
            <el-card shadow="hover">
                <template #header>
                    <div style="display: flex; align-items: center;">
                        <el-button type="primary" @click="accountDialog = true">添加角色</el-button>
                        <div style="padding: 5px;"></div>
                        <el-input style="width: 260px;" placeholder="请输入管理员账号" />
                        <div style="padding: 5px;"></div>
                        <el-button type="primary" :icon="Search">搜索</el-button>
                    </div>
                </template>

                <!-- 表格 -->
                <el-table :data="tableData.list" :border="true" style="width: 100%">
                    <el-table-column prop="id" label="序号" width="60" />
                    <el-table-column prop="uid" label="UID" />
                    <el-table-column prop="username" label="管理员账号" />
                    <el-table-column prop="nickname" label="管理员昵称" />

                    <el-table-column label="权限">
                        <template #default="scope">
                            <el-tag v-if="scope.row.purview == 0" type="success">超级管理员</el-tag>
                            <el-tag v-if="scope.row.purview == 1" type="warning">普通管理员</el-tag>
                        </template>
                    </el-table-column>


                    <el-table-column label="状态">
                        <template #default="scope">

                            <el-tooltip :content="scope.row.status == 1 ? '正常' : '关闭'" placement="top">
                                <el-switch :disabled="scope.row.id == 1" v-model="scope.row.status" :active-value="1"
                                    :inactive-value="0"
                                    @change="accountStatus(scope.row.uid, scope.row.status)"></el-switch>
                            </el-tooltip>

                        </template>
                    </el-table-column>

                    <el-table-column prop="createtime" label="添加时间" />


                    <el-table-column label="操作" width="330">
                        <template #default="scope">
                            <el-popconfirm title="确定删除此管理员吗？" @confirm="accountDelete(scope.row.uid)">
                                <template #reference>
                                    <el-button type="danger" :icon="Delete" :disabled="scope.row.id == 1">删除
                                    </el-button>
                                </template>
                            </el-popconfirm>
                          <el-button type="success" :disabled="scope.row.id == 1"
                                     @click="edit(scope.row)">编辑</el-button>
                            <el-button type="success" :icon="Share" :disabled="scope.row.id == 1"
                                @click="fenpeiMenus(scope.row)">权限管理</el-button>
                        </template>
                    </el-table-column>

                </el-table>
                <!-- 分页 -->
                <div style="padding: 10px;"></div>

                <el-pagination small background layout=" prev, pager, next, jumper" :total="1" />

            </el-card>
        </el-col>
    </el-row>


    <!-- 添加管理员 -->
    <el-dialog v-model="accountDialog" :title="title" center width="38%">
        <el-form label-width="80px">
            <el-form-item label="管理员账号">
                <el-input v-model="formData.username" placeholder="账户长度6-16位" :disabled="disabled"/>
            </el-form-item>
            <el-form-item label="账号密码">
                <el-input type="text" v-model="formData.password" placeholder="密码长度8-16位" />
            </el-form-item>
            <el-form-item label="确认密码">
                <el-input type="text" v-model="formData.passwords" placeholder="确认密码长度8-16位" />
            </el-form-item>
            <el-form-item label="管理员昵称">
                <el-input type="text" v-model="formData.nickname" placeholder="例如：刘德华" />
            </el-form-item>

            <el-form-item label="权限管理">
                <el-radio-group v-model="radio">
                    <el-radio label="1" border>默认权限</el-radio>
                </el-radio-group>
            </el-form-item>

        </el-form>
        <template #footer>
            <el-button type="danger" @click="accountDialog = false">取消</el-button>
            <el-button type="primary" @click="SubmitFormData">确定</el-button>
        </template>
    </el-dialog>

    <!-- 菜单权限管理 -->
    <el-dialog v-model="menusDialog" title="权限管理" center width="38%" :destroy-on-close="true" @close="handleClose">
        <el-form label-width="80px">

            <el-form-item label="管理员账号">
                <el-input v-model="userData.username" :disabled="true" />
            </el-form-item>
            <el-form-item label="分配菜单">
                <el-tree ref="treeRef" :data="menusData.list" :props="defaultProps" :show-checkbox="true" node-key="id"
                    :default-checked-keys="defKeys.list" />
            </el-form-item>
        </el-form>
        <template #footer>
            <el-button type="danger" @click="menusDialog = false">取消</el-button>
            <el-button type="primary" @click="SubmitMenus(userData.uid)">确定</el-button>
        </template>
    </el-dialog>

    <!-- 菜单权限管理 -->
</template>

<script setup>

import { ref, reactive, onMounted } from 'vue'
import { request_post } from '@/common/axios/request.js'
import { success, error } from '@/common/tool/message.js'
import { ArrowRightBold, Share, Delete, Search } from '@element-plus/icons-vue'



const radio = ref('1')
const treeRef = ref(null)
const menusDialog = ref(false)
const disabled = ref(false)
const accountDialog = ref(false)
const defKeys = reactive({ list: [] })
const tableData = reactive({ list: [] })
const menusData = reactive({ list: [] })
const title = ref('添加管理员')
const userData = reactive({ uid: null, username: null })
const defaultProps = { children: 'children', label: 'name', id: 'id' }
const formData = reactive({
    username: '',
    nickname: '',
    password: '',
    passwords: ''
})

function edit(item){
  console.log(item,'item');
   title.value="编辑管理员"
  disabled.value=true
  formData.id = item.id
  formData.username = item.username
  formData.nickname = item.nickname
  accountDialog.value = true
}
// 分配权限
function fenpeiMenus(item) {
    menusDialog.value = true
    userData.uid = item.uid
    userData.username = item.username

	menu_children_digui(item.menus)

    // Object.keys(item.menus).forEach((key) => {
    //     item.menus[key].children.forEach((item) => {
    //         defKeys.list.push(item.id)
    //     })
    // })
}

function menu_children_digui(list){
	Object.keys(list).forEach((key) => {
		if(list[key].children) {
			menu_children_digui(list[key].children)
		}else{
			defKeys.list.push(list[key].id)
		}

	})

}

function SubmitMenus() {

    const keys = [
        ...treeRef.value.getCheckedKeys(),
        ...treeRef.value.getHalfCheckedKeys()
    ]
    // 获取菜单
    request_post('admin_account_menus_edit', { uid: userData.uid, menuskeys: keys }).then(res => {

        if (res.data.code == 200) {
            console.log(res)
            menusDialog.value = false
            accountIndex()
            return success(res.data.msg)
        } else {
            return error(res.data.msg)
        }
    })

}

const handleClose = () => {
    defKeys.list = []
}

onMounted(() => {
    accountIndex()
    menusData.list = JSON.parse(window.localStorage.getItem('menus_data'))
})

// 提交数据
function SubmitFormData() {
    accountCreate()
}

// 添加管理
function accountCreate() {
    let url = 'admin_account_create'
    if(formData.id){
      url ='admin_account_update'
    }
    request_post(url, formData).then(res => {
        // console.log(res)
        if (res.data.code == 200) {
            success(res.data.msg)
            accountIndex()
            formData.username = "";
            formData.password = "";
            formData.passwords =""
            formData.nickname = ""
            accountDialog.value = !accountDialog.value
        } else {
            error(res.data.msg)
        }
    })
}

// 获取列表
function accountIndex() {
    request_post('admin_account_index').then(res => {
        // console.log(res)
        if (res.data.code == 200) {
            tableData.list = res.data.data
        } else {
            error(res.data.msg)
        }
    })
}

// 修改状态
function accountStatus(uid, status) {
    request_post('admin_account_status', { uid, status }).then(res => {
        if (res.data.code == 200) {
            success(res.data.msg)
        } else {
            error(res.data.msg)
        }
    })
}

// 删除管理员
function accountDelete(uid) {
    request_post('admin_account_delete', { uid }).then(res => {
        if (res.data.code == 200) {
            accountIndex()
            success(res.data.msg)
        } else {
            error(res.data.msg)
        }
    })
}

</script>

<style></style>
